<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="box" v-for="(item, index) in data.goods" :key="index">
            <view class="item">
                <view class="grey">货物类型</view>
                <view class="item-right">{{item.type}}</view>
            </view>
            <view class="item">
                <view class="grey">产品名称</view>
                <view class="item-right">{{item.goods}}</view>
            </view>
            <view class="item" v-if="item.brand">
                <view class="grey">品牌</view>
                <view class="item-right">{{item.brand}}</view>
            </view>
            <view class="item" v-if="item.packages">
                <view class="grey">包装</view>
                <view class="item-right">{{item.packages}}</view>
            </view>
            <view class="item" v-if="item.model">
                <view class="grey">型号</view>
                <view class="item-right">{{item.model}}</view>
            </view>
            <view class="item">
                <view class="grey">件数</view>
                <view class="item-right">{{item.num}}件</view>
            </view>
            <view class="item" v-if="item.estimate_weight">
                <view class="grey">重量</view>
                <view class="item-right" v-if="item.freight_type != 3">{{item.estimate_weight}}斤</view>
				<view class="item-right" v-if="item.freight_type == 3">{{item.estimate_weight}}</view>
            </view>
        </view>
        
        <view class="btns" v-if="type == 1">
            <view class="btn-l" @click="confirm(2)">同意</view>
            <view class="btn-r" @click="show = true">拒绝</view>
        </view>
        
        <u-mask :show="show">
            <view class="privacy-pop">
                <view class="privacy-pop-box">
                    <view class="close-01">
                        <u-icon name="close-circle" size="50" @click="show = false"></u-icon>
                    </view>
                    <view class="privacy-title">拒绝原因</view>
                    <view>
                        <textarea v-model="content" placeholder="请输入拒绝原因" class="t-inp"></textarea>
                    </view>
                    <view class="btn-text2" @click.stop="confirm(3)">确定</view>
                </view>
            </view>
        </u-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                content: '',
				type: '',
				id: '',
				data: {},
            };
        },
        onLoad(option) {
            this.id = option.id
			this.type = option.type
			this.getData()
        },
        methods: {
			// 2同意 3拒绝
            confirm(num) {
				if (num == 2) {
					this.$confirm('您是否同意用户的取消订单要求？',()=>{
					    this.doCancel(num)
					})
				} else if (num == 3) {
					if (!this.content) {
						this.$toast('请输入拒绝原因')
						return
					}
					this.doCancel(num)
				}
            },
			
			doCancel(num) {
				this.$ajax('cancel_examine', {
					user_token: this.$getSync('userToken'),
					order_id: this.id,
					cancel_status: num,//2通过 3驳回
					reject_reason: this.content,//拒绝原因
				}).then(ret => {
					if (ret.success == 1000) {
						this.$toast('提交成功');
						this.show = false
						this.content = ''
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.msg);
					}
				});
			},
			
			getData() {
				this.$ajax('loading_vehicle_detail', {
					user_token: this.$getSync('userToken'),
					order_id: this.id,
				}).then(ret => {
					if (ret.success == 1000) {
						this.data = ret.detail
						
					} else {
						this.$toast(ret.msg);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
    .privacy-pop {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .privacy-pop-box {
        width: 700rpx;
        padding: 40rpx 20rpx 20rpx;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 20rpx;
        position: relative;
    }
    .close-01{
        position: absolute;
        right: 20rpx;
        top: 20rpx;
    }
    .privacy-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        padding: 20rpx 0 40rpx;
    }
    .t-inp{
        width: 100%;
        background-color: #f5f6fa;
        border-radius: 10rpx;
        padding: 20rpx;
    }
    .btn-text2{
        font-size: 30rpx;
        color: #fff;
        background-color: #00457f;
        padding: 20rpx 50rpx;
        border-radius: 20rpx;
        margin: 20rpx;
        text-align: center;
    }
    
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx 90px;
    }
    .bg {
    	width: 100%;
    	height: 600rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
        background: linear-gradient(to bottom, #004580,#18568c, #f2f4fa);
    }
    .title{
        padding: 10rpx 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 36rpx;
        color: #fff;
    }
    .top-icon{
        width: 69rpx;
        height: 69rpx;
        margin-right: 20rpx;
    }
    .dest{
        font-weight: bold;
    }
    
    .box{
        padding: 20rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
    }
    .route{
        padding: 10rpx 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .line{
        width: 31rpx;
        height: 162rpx;
        margin-right: 15rpx;
    }
    .route-r{
        flex: 1;
        font-size: 34rpx;
        font-weight: bold;
    }
    .address{
        font-size: 28rpx;
        color: #999999;
        font-weight: normal;
    }
    
    .work-title{
        font-size: 32rpx;
        font-weight: bold;
        padding-top: 10rpx;
        padding-bottom: 15rpx;
    }
    .item{
        padding: 15rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .item-right{
        flex: 1;
        text-align: right;
        font-weight: bold;
        padding-left: 30rpx;
    }
    .text{
        word-break: break-all;
        white-space: pre-line;
        padding-top: 5rpx;
    }
    .grey{
        color: #656565;
    }
    .list-title{
        font-size: 34rpx;
        color: #fff;
        background: linear-gradient(to right, #7fb1e4, #c7e1f9);
        border-radius: 20rpx;
        padding: 15rpx 30rpx;
        height: 120rpx;
        margin-bottom: -40rpx;
    }
    .price{
        padding: 25rpx 0 10rpx;
        border-top: 2rpx solid #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 28rpx;
    }
    .price-num{
        font-size: 40rpx;
        font-weight: bold;
        padding-left: 10rpx;
        padding-right: 5rpx;
    }
    
    .pt-box{
        padding: 35rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon-02{
        width: 55rpx;
        height: 55rpx;
        margin-right: 15rpx;
    }
    .pt-t1{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 20rpx;
    }
    .pt-t2{
        font-size: 22rpx;
        color: #929292;
    }
    .pt-t3{
        font-size: 22rpx;
        color: #ff5f2b;
    }
    
    .l-icon{
        width: 30rpx;
        height: 30rpx;
        background-color: #ff4926;
        border-radius: 10rpx;
        font-size: 20rpx;
        color: #fff;
        text-align: center;
        line-height: 30rpx;
        margin-right: 10rpx;
    }
    .item-right2{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .tip{
        color: #fe6a00;
        font-weight: normal;
    }
    
    
    .footer{
        width: 750rpx;
        height: 120rpx;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 9;
    }
    .f-top{
        height: 50rpx;
        background-color: #ddebfa;
        font-size: 25rpx;
        color: #0c89ea;
        line-height: 50rpx;
        text-align: right;
        padding-right: 35rpx;
    }
    .f-down{
        padding: 15rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .f-price{
        color: #ff3f00;
        padding-left: 15rpx;
    }
    .f-price-num{
        font-size: 38rpx;
        font-weight: bold;
    }
    .f-tip{
        font-size: 22rpx;
        color: #656565;
        padding-top: 5rpx;
    }
    .f-tip-t{
        color: #000;
    }
    .f-btn{
        font-size: 28rpx;
        color: #fff;
        padding: 15rpx 35rpx;
        background-color: #00457f;
        border-radius: 50rpx;
    }
    
    
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 35rpx 0;
    }
    .btns>view{
        width: calc(690rpx / 2);
        padding: 25rpx 0;
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        border-radius: 15rpx;
    }
    .btn-l{
        background-color: #00457f;
    }
    .btn-r{
        background-color: #99aecb;
    }
    

</style>
